<template>
  <div class="content_card">
    <UHeader>
      <div slot="right">
        <el-button type="success" size="mini" @click="showDialog=true">添加</el-button>
      </div>

    </UHeader>
    <UTable ref="mTable" :search-api="getRoles" :columns="columns" :hidel-operate="true" />
    <el-dialog :visible.sync="showDialog" :append-to-body="true" :close-on-click-modal="false" width="400px" title="编辑菜单">
      <el-form ref="form" :model="roleFrom" style="padding: 0px 20px 0px 20px" label-width="80px" label-position="right" size="small">
        <el-form-item label="角色">
          <el-input v-model="roleFrom.roleName" placeholder="请输入角色名称"/>
        </el-form-item>
        <el-form-item label="描述">
          <el-input v-model="roleFrom.describes" placeholder="描述"/>
        </el-form-item>
        <RolesSelect/>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" style="width: 98%" @click="save">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import UHeader from '@/components/UHeader'
import UTable from '@/components/UTable'
import { getRoles, editRole } from '@/api/user'
export default {
  components: {
    UHeader, UTable
  },
  data() {
    return {
      roleFrom: {},
      showDialog: false,
      getRoles: getRoles,
      columns: [
        { type: 'index', width: 60, fixed: 'left' },
        { prop: 'roleName', label: '角色' },
        { prop: 'describes', label: '描述' },
        { prop: 'createBy', label: '创建人' },
        { prop: 'createTime', label: '创建时间' },
        { type: 'handle', width: '200', buttons: [{ text: '查看权限', type: 'info' }, { text: '删除', type: 'danger' }] }
      ]

    }
  },
  created() {

  },
  methods: {
    save() {
      editRole(this.roleFrom).then(res => {
        this.$message({
          message: '操作成功',
          type: 'success'
        })
        this.showDialog = false
        this.$refs.mTable.refresh()
      })
    }
  }
}
</script>

<style scoped>
  .content_card{
     padding: 0px;
  }
  .buttons{
    float: right;
  }
  .role{
    margin:60px 80px 0px 80px;
  }
  .header{
    display: flex;
    padding: 10px 5px;
    justify-content: space-between;
    text-align: center;
    border-bottom: 1px solid #edf2fc;
  }
</style>
